import React, { memo, Suspense } from 'react'
import { Layout, Spin } from 'antd'
import '../../assets/styles/components/home/content.scss'
import PropTypes from 'prop-types'
import { Route, Switch } from 'react-router-dom'

const { Content } = Layout

const ContentUI = (props) => {
  const {routes} = props
  console.log('content render')
  return (
    <Content className="main-content">
      <div className="bg-white">
          <Suspense fallback={<Spin delay={100}><div></div></Spin>}>
            <Switch>
              {
                routes.map(item => (
                  <Route key={item.path} path={item.path} exact={item.exact} component={item.component}></Route>
                ))
              }
            </Switch>
          </Suspense>
      </div>
    </Content>
  )
}

ContentUI.propTypes = {
  routes: PropTypes.array
}

export default memo(ContentUI)
